<template>
  <div :class="['header','header-dynamic-'+global.showType]">
    <div class="logo">
      <router-link to="/">
        <img class="logo-img" src="../../assets/images/logo.png" alt="" />
      </router-link>
    </div>
    <div class="search">
      <input v-model="input" class="search-input" placeholder="书名、作者、关键字" />
      <div class="search-btn" @click="util.searchKeyExcute($store,input,$route)">
        <i class='search-icon'></i>
      </div>
    </div>
    <div class="info">
      <span class="info-show-go" @click="showGo()">{{global.isPc?'手机站':'电脑站'}}</span>
      <router-link to="/index/user/favorites">
        <span class="info-bookshelf">我的书架</span>
      </router-link>
      <!-- <span class="info-divider"></span> -->
      <c-divider/>
      <router-link to="/index/user/userInfo" v-show="login">
        <span class="info-login">{{nickname}}</span>
      </router-link>
      <a class="info-logout" v-show="login" @click="logout()">
        <span class="info-login">退出</span>
      </a>

      <!-- <router-link to="/index/login" v-show="!login"> -->
        <span class="info-login" v-show="!login" @click="goLoginPage()">登录</span>
      <!-- </router-link> -->
      <router-link to="/index/register" v-show="!login">
        <span class="info-login">注册</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import cDivider from '../../components/util/Divider.vue';
export default {
  data() {
    return {
      input: "",
      login:false,
      nickname:''
    };
  },
  components:{
    cDivider
  },
  created(){
    this.refreshLoginStatus();
  },
  methods:{
    refreshLoginStatus(){
      // console.log(localStorage);
      // console.log(this.$cookies.keys());
      // this.$cookies.keys().forEach(key => {
      //   console.log(key+':'+this.$cookies.get(key));
      // });
      if(this.$cookies.get('Authorization') != null){
        this.login = true;
        this.nickname = this.$cookies.get('nickname');
      }else if(localStorage.getItem('Authorization') != null){
        this.$cookies.set("Authorization", localStorage.getItem('Authorization'), 0);
        //刷新token
        this.$http.postForm('/user/refreshToken', {}, res=>{
          localStorage.setItem('Authorization', res.token);
          this.$cookies.set("Authorization", res.token, 0);
          this.$cookies.set("nickname", res.nickName, 0);

          this.login = true;
          this.nickname = res.nickName;
        }, () => {
          //访问有误如token失效不处理,清理本地token
          localStorage.removeItem('Authorization');
          this.login = false;
        });
      }else{
        this.login = false;
      }
    },
    logout(){
      let refreshManual = false;
      if(this.$route.path == '/index/home'){
        refreshManual = true;
      }
      this.util.logout();
      if(refreshManual){
        this.refreshLoginStatus();
      }
    },
    goLoginPage(){
      if(this.$route.path != "/index/login"){
        this.$router.push('/index/login?orginUrl='+encodeURIComponent(location.href));
      }
    },
    showGo(){
      localStorage.setItem('showType', this.global.isPc?'mobile':'pc');
      location.reload();
    }
  },
  watch:{
    '$route.path':function(){
      //路由有变化就检查登录状态
      this.refreshLoginStatus();
    },
    '$store.state.loginStatus':function(){
      this.refreshLoginStatus();
    },
    '$store.state.searchKey':function(newVal){
      this.input = newVal;
    }
  }
  // mounted(){
  //   Vue.$on('refreshloginstatus', ()=>{
  //     console.log('refresh...');
  //     // this.refreshLoginStatus();
  //   });
  // }
};
</script>

<style lang="scss" scoped>
.header-dynamic-pc{
  height: 92px;
  display: flex;
}
.header-dynamic-mobile{
  height: 120px;
}
.header {
  background-color: #fff;
  width:100%;
}

.logo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  .logo-img {
    margin-left: 50px;
    height: 48px;
  }
}

.search {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  .search-input {
    outline: none;
    padding-left: 19px;
    border: 1px solid #e97e04;
    border-radius: 19px 0 0 19px;
    width: 270px;
    height: 34px;
    font-size: $base-fsize;
  }

  .search-btn {
    cursor: pointer;
    height: 38px;
    width: 60px;
    border-radius: 0 19px 19px 0;
    background-color: $base-color;
    display: flex;
    justify-content: center;
    align-items: center;
    .search-icon{
      width: 19px;
      height: 19px;
      background: url('../../assets/images/search.png');
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
}

.info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  .info-show-go{
    color: #333;
    height: 20px;
    line-height: 20px;
    margin-right: 30px;
    cursor: pointer;
  }
  .info-show-go:hover{
    color: $base-color;
  }
  .info-bookshelf {
    padding-left: 25px;
    background-image: url("../../assets/images/icon_sj.png");
    background-size: contain;
    background-repeat: no-repeat;
    height: 20px;
    line-height: 20px;
    margin-right: 20px;
  }

  // .info-divider{
  //   height: 20px;
  //   border-style: solid;
  //   border-color: #C3BABD;
  //   border-width: 0 0 0 1px;
  // }

  .info-login {
    color: #333;
    cursor: pointer;
    line-height: 20px;
    height: 20px;
    margin-left: 15px;
  }
  .info-login:hover{
    color: $base-color;
  }
  .info-logout{
    cursor: pointer;
  }
  // .info-regist {
  //   height: 30px;
  //   width: 40px;
  // }
}
</style>